<div id="contentContainer" data-ng-controller="ControllerEvent" data-ng-init="updateLists()">
    <h2>{{eventTitle}}</h2>

    <canvas id="canvasAnimation"
            width="960" height="240"
            style="background-color:#FFFFFF"></canvas>

    <div data-ng-if="isOwner">
        <h3>Editar datos del evento</h3>

        <form name="eventInfo">
            <h4>Datos del evento</h4>
            <fieldset>
                <label>Nombre</label>
                <input type="text" data-ng-model="event.name"/>
                <label>Fecha de inicio</label>
                <input type="text" name="eventDateBegin" data-ng-model="event.beginning" required/>
                <label>Fecha de fin</label>
                <input type="text" name="eventDateEnd" data-ng-model="event.end" required/>
                <label>Tipo de evento</label>
                <select data-ng-model="event.kind"
                        data-ng-options="type.label for type in eventListType">
                </select>
                <label class="clearBoth">Descripción</label>
                <textarea data-ng-model="event.description"></textarea>
            </fieldset>
            <fieldset class="roles">
                <h4>Roles necesarios</h4>
                <label>Cantidad y tipo de voluntario</label>
                <input type="number" data-ng-model="role.quantity" data-ng-init="role.quantity = 0"/>
                <select data-ng-model="role.type"
                        data-ng-options="role.label for role in roleListType"
                        data-ng-init="role.type = roleListType[0]">
                </select>
                <button data-ng-click="addRole()" class="interaction">Agregar role</button>
                <ul class="filterList">
                    <li data-ng-repeat="role in roleList">{{role.quantity}} {{role.type.label}}
                        <button class="error" data-ng-click="removeRole($index)">Eliminar</button>
                    </li>
                </ul>
            </fieldset>
            <fieldset>
                <h4>Premios disponibles</h4>
                <ul class="grid eventPrizes">
                    <li data-ng-repeat="prize in prizeAvailable">
                        <label class="prize"><span class="icon {{prize.id}}"></span><input type="checkbox"
                                                                                           data-ng-change="setPrizes(prize, isChecked)"
                                                                                           data-ng-model="isChecked"
                                                                                           ng-checked="prize.isChecked"/>{{prize.name}}</label>
                    </li>
                </ul>
                <a href="javascript:void(0)" data-ng-if="event.usermin>=100" class="button interactionAlt">Solicitar
                    premio personalizado</a>
            </fieldset>
            <button data-ng-click="updateInfo()" class="action">Guardar</button>
            {{messageUpdate}}
        </form>
    </div>
    <div id="eventInfo" data-ng-if="!isOwner">
        <h3 class="flag">Descripción</h3>

        <p>{{event.description}}</p>
        <button data-ng-if="!enrollment.success && isLogged" data-ng-click="enrollInEvent()" class="interactionAlt">
            Únete
        </button>
        <button data-ng-if="enrollment.success" data-ng-click="withdrawUser('currentUser')" class="error">Abandonar
        </button>
        <hr/>
        <h3 class="flag">Premios del evento</h3>
        <ul class="grid eventPrizes">
            <li data-ng-repeat="sPrize in prizeSelected" class="prize">
                <span class="icon {{sPrize.id}}"></span>{{sPrize.name}}
            </li>
        </ul>
        <hr/>
        <h3 class="flag">Roles necesarios</h3>
        <ul class="filterList">
            <li data-ng-repeat="role in roleList">{{role.quantity}} {{role.type.label}}</li>
        </ul>
    </div>
    <hr/>
    <h3 class="flag">Inscritos</h3>
    <ul id="tabUsers" class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#voluntarios" role="tab" data-toggle="tab">Voluntarios</a>
        </li>
        <li>
            <a href="#grupos" role="tab" data-toggle="tab">Grupos</a>
        </li>
        <li>
            <a href="#aliados" role="tab" data-toggle="tab">Aliados</a>
        </li>
    </ul>
    <div id="enrollTab" class="tab-content">
        <div class="tab-pane active" id="voluntarios">
            <ul class="grid">
                <li data-ng-repeat="volunteer in volunteerList" class="cols-20">
                    <a href="/usuario/{{volunteer.user.id}}">
                        <img src="/styles/images/avatar/{{volunteer.user.avatar[0].id}}.png"/>
                        {{volunteer.user.username}}
                    </a>
                    <button data-ng-click="withdrawUser(volunteer.id)" data-ng-if="isOwner">Retirar</button>
                </li>
            </ul>
        </div>
        <div class="tab-pane" id="grupos">
            <ul class="grid">
                <li class="cols-20">
                    <a href="javascript:void(0);">
                        <img src="/styles/images/default_icon.png"/>
                        Gran Empresa
                    </a>
                    <button data-ng-if="isOwner">Retirar</button>
                </li>
                <li class="cols-20">
                    <a href="javascript:void(0);">
                        <img src="/styles/images/default_icon.png"/>
                        Grupo Voluntarios unidos
                    </a>
                    <button data-ng-if="isOwner">Retirar</button>
                </li>
            </ul>
        </div>
        <div class="tab-pane" id="aliados">
            <ul class="grid">
                <li data-ng-repeat="ally in allyList" class="cols-20">
                    <a href="/usuario/{{ally.user.id}}">
                        <img src="/styles/images/default_icon.png"/>
                        {{ally.user.name}} {{ally.user.lastname}}
                    </a>
                    <button data-ng-click="withdrawUser(ally.id)" data-ng-if="isOwner">Retirar</button>
                </li>
            </ul>
        </div>
        <div data-ng-if="isOwner">
            <form>
                <h3>Buscar usuario por:</h3>
                <fieldset>
                    <select data-ng-model="profileType.option"
                            data-ng-options="option.name for option in profileTypeOptions"
                            data-ng-change="clearFields()">
                    </select>
                </fieldset>
                <fieldset>
                    <label>Nombre del usuario</label>
                    <input type="text" data-ng-model="fieldUser.text" ng-change="predictUser()"/>
                </fieldset>
            </form>
            {{messageSearch}}
            <ul id="menuEnrolled">
                <li data-ng-repeat="user in availableUsers"><a href="/usuario/{{user.id}}">{{user.name}}
                    {{user.lastname}}</a>
                    <button data-ng-click="enrollUser(user)">Enrolar</button>
                </li>
            </ul>
        </div>
    </div>
<script src="/libs/easeljs-0.7.1.min.js"></script>
<script src="/libs/tweenjs-0.5.1.min.js"></script>
<script src="/libs/movieclip-0.7.1.min.js"></script>
<script src="/libs/preloadjs-0.4.1.min.js"></script>
<script data-ng-if="animId==0" src="/js/animacion0.js"></script>
<script data-ng-if="animId==1" src="/js/animacion1.js"></script>
<script type="text/javascript">
    $(function(){
        var canvas, stage, exportRoot;
        function init() {
            canvas = document.getElementById('canvasAnimation');
            var images = images || {};

            var loader = new createjs.LoadQueue(false);
            loader.addEventListener("fileload", handleFileLoad);
            loader.addEventListener("complete", handleComplete);
            loader.loadManifest(lib.properties.manifest);
        }

        function handleFileLoad(evt) {
            if (evt.item.type == "image") {
                images[evt.item.id] = evt.result;
            }
        }

        function handleComplete() {
            exportRoot = new lib.Applícate_Animación();

            stage = new createjs.Stage(canvas);
            stage.addChild(exportRoot);
            stage.update();

            createjs.Ticker.setFPS(lib.properties.fps);
            createjs.Ticker.addEventListener("tick", stage);
        }
        $(document).ready(function(){
            init();
        });
    });

</script>
</div>